<template>
  <div class="hello">
  <div> <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    
                    <div class="layout-nav">
                      
                        <MenuItem name="1" to='/'>
                               <Icon type="logo-octocat" />
                           <font aria-setsize="4" color="red">猫眼电影</font>
                        </MenuItem>
                        <MenuItem>
                            <Icon type="ios-navigate"></Icon>
                           西安
                        </MenuItem>
                        <MenuItem name="2" to='/'>
                           
                            首页
                        </MenuItem>
                        <MenuItem name="4" to="/">
                          
                            电影
                        </MenuItem>
                         <MenuItem name="4" to="/">
                         
                            影院
                        </MenuItem>
                         <MenuItem name="4" to="/">
                           
                            演出
                        </MenuItem>
                         <MenuItem name="4" to="/">
                           
                            榜单
                        </MenuItem>
                         <MenuItem name="4" to="/">
                            
                           热点
                        </MenuItem>
                         <MenuItem name="4" to="/">
                          
                            商城
                        </MenuItem>
                       
                         <MenuItem name="4" to="/">
                        <Icon type="md-phone-portrait"/>APP下载                        
                        </MenuItem>
                        <MenuItem name="4" to="/">
                           登陆
                        </MenuItem>
                         <MenuItem name="4" to="/">
                           注册
                        </MenuItem>
                      <div class="layout-logo">
                         <Input  search enter-button placeholder="Enter something..." />
                     </div>
                    </div>
                </Menu>
            </Header></div>
    <div id="chooesout">
        <div class="one">
          <img v-bind:src= 'pic' />
         
        </div>
        <div class="two">
          &nbsp;&nbsp;&nbsp;&nbsp;{{ one }}
          <p />
          <!-- {{item.time | dateFmt(‘YYYY-MM-DD HH:mm:ss‘)}} -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上映时间：<font size="3">{{
            two | dateFmt("YYYY-MM-DD")
          }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;票价：<font size="3">{{ three }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电影简介：<font size="3">{{
            fore
          }}</font>
          <p />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参演人员： &nbsp;&nbsp;<font size="5">导演：</font><font size="3">{{
            fore1
          }}</font
          >&nbsp;&nbsp;<font size="5">主要演职人员：</font><font size="3">{{ fore2 }}</font
          >&nbsp;&nbsp;&nbsp;<font size="3">{{ fore3 }}</font
          >&nbsp;&nbsp;&nbsp;<font size="3">{{ fore4 }}</font>
          <div class="details">
            <!-- <el-row>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button
                type="danger"
                value=""
                @click="buy"
                >{{ five }}</el-button
              >
            </el-row> -->
          </div>
        </div>
    </div>
    <!-- <d -->
      <br>
      
      <br>
      <div class="moddle">
        <div class="pingpai" >
         品牌:&nbsp;<a v-for="data in yinyun2" class="pin" @click="clickmname(data.maname,data.maid)" :key="data.maid">{{data.maname}}&nbsp;&nbsp;&nbsp;</a>
       
         </div>
     <br>
       <div class="areas" >区域：
         <a v-for="data in areas" @click="clickarea(data.aname,data.aid)" :key="data.aid">{{data.aname}}&nbsp;&nbsp;</a></div>
      
      
       <div class="bofq" >播放区：
         <a v-for="data in yinyun2" :key="data.id">{{data.mating}}&nbsp;&nbsp;</a></div>
     
      </div>
     
       <div id="liebiao">
       <a font-color="yellow">影院列表</a>
    </div>
    <div  >
     <div class="aa" v-for="data in selectAll" :key="data.maid">
        <div class="y1">
          
      <h id="yingyuanming" font-color="red" >影院名:{{data.maname}}</h><br>
      <h id="yingyuandizhi">地址：{{data.maadd}}</h><br>
       <h id="yingyuandizhi">播放区：{{data.mating}}</h><br>
     
    </div>
    
    
      <div class="y2">价格:{{three}}￥<el-button   type="danger" round ><a  @click="clickhou(maname,mid,uname)" >选票购座</a></el-button></div>
        </div>
    </div>
    <div class="floor"></div>
    <!-- {{mname}} -->
  </div>
  
</template>

<script>
import axios from "axios";
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  name: "hello",
  data() {
    return {
    uname:'',
   // pingpai:[{name1:'万达影城' }],
    pp:'',
    dq:'',
maname:'',
     areas:[{
       aid:'',
       aname:'',
     }],

    selectAll:[
      {maid:'',
      maname:'',
      mating:'',
      maddr:'',
      }
    ],
    yinyun2:[
      {maid:'',
      maname:'',
      mating:'',
      maddr:'',
      }
    ],
     bofq:[{name3:'大厅'}],
      title: "正在热映",
      mid:[],
      one: [],
      two: [],
      three: [],
      fore: [],
      fore1: [],
      fore2: [],
      fore3: [],
      fore4: [],
      pic:[],
      five: "特惠购票",
      hot: "热门短评:",
      btnShow: false,
      index: "0",
      //replyComment: "",
    };
  },
  
  methods: {

    clickarea:function(name,aid){
        this.dq=aid;
      // alert(name)
      // alert(aid)
       axios.get("api/dto/selectAreaName2?aname="+name).then(res=>{

        this.selectAll=res.data;
      })
    },//触发
    clickmname:function(name,maid){
      this.pp=maid
      this.maname=name;
      //  alert(name)
      // alert(maid)
       axios.get("api/maddr/selectMname?maname="+name).then(res=>{
        this.selectAll=res.data;
      })
    },//触发
// //   alert(obj.maid)
//              alert(obj.aid
//             alert(obj.maid)
//             alert(obj.mid)
//        this.$router.push({name:'choose',params:{mid:obj.mid,maid:obj.maid,aid:obj.aid}})
   clickhou:function(maname,mid,uname){
    //  alert(mid);
    //  alert(maname);
    //  alert(uname)
                //this.$router.push({name:'choose',params:{mid:this.mid,pp:this.pp,dq:this.dq}})
        this.$router.push({name:'choosesit',params:{maname:this.maname,mid:this.mid,uname:uname}});
        // this.$router.push({name:'choosesit',params:{maname:this.maname}})
     },//跳转
  //  selectAll:function(){
  //    alert(111)
  //     axios.get("api/maddr/selectAll").then(res=>{
  //       this.selectAll=res.data;
  //     })
  //   },//取影院
    
      selectAllMaddr:function(){
    //  alert(111)
      axios.get("api/maddr/selectAllMaddr").then(res=>{
        this.yinyun2=res.data;
        this.selectAll=res.data;
      })
    },
    
     
     selectAllArea:function(){
    //  alert(111)
      axios.get("api/area/selectAll").then(res=>{
        this.areas=res.data;
      })
    },//取区域
    //  selectAllUser:function(){
    //  alert(111)
    //   axios.get("api/user/selectAllUser").then(res=>{
    //     this.tableData=res.data;
    //   })
    // },
    // function (x) 
    getOneById: function (mid) {
      // "api/movie/selectOne?mid="+x
      axios.get("api/movie/selectOne?mid="+mid).then((res) => {
        //  alert(res.data);
        // console.log(res.data);
        this.mid=res.data.mid
        this.one = res.data.mname;
        this.two = res.data.mtime;
        this.three = res.data.mprice;
        this.fore = res.data.mdesc;
        this.fore1 = res.data.mactor1;
        this.fore2 = res.data.mactor2;
        this.fore3 = res.data.mactor3;
        this.fore4 = res.data.mactor4;
        this.pic=res.data.mpic;
      });
    },
    // buy(uname){
    //   this.$router.push({name:"choosesit",params:{uname:uname}});
    // }
  },
  mounted() {
    // this.$routre.params.mid
    // alert(this.$route.params.uname)
    this.uname=this.$route.params.uname
    // alert(this.uname)
    this.getOneById(this.$route.params.mid);
    this.selectAllMaddr();
    this.selectAllArea();
    this.selectAll();
    // alert("222")
    
    // alert("111")
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.floor{
  margin-top: 400px;
}
/* #chooseout {
  width: auto;
  height: 360px;
} */
#chooesout {
  margin: auto 0;
  /* margin-
  top: 40px; */
  /* margin-left: 190px; */
  height: 395px;
  /* border: solid red 1px; */

  background: url("../assets/backg.png") no-repeat;
  /* background-position: center; */
  /* height: 100%;
  width: 100%;
  background-size: cover; */
  /* position: fixed; */
}
.one {
  width: 230px;
  height: 326px;
  /* border: red solid 1px; */
  float: left;

  margin-left: 190px;
  margin-top: 20px;
}
.one img {
  width: 230px;
  height: 326px;
}

.two {
  width: 50%;
  height: 326px;
  /* border: red solid 1px; */
  float: left;

  /* margin-left: 190px; */
  margin-top: 20px;

  text-align: left;
  font-size: 25px;
  -webkit-text-fill-color: white;
}
#hot {
  text-align: left;
  font-size: 25px;
}

#pingjia {
  /* border: yellow 1px solid; */
  width: 800px;
  float: left;
  margin-left: 50px;
}
.my-reply {
  width: 800px;
}

.right {
  /* border: solid 1px red; */
  width: 548px;
  height: 1200px;
  float: left;
}
.el-button {
  margin-top: 20px;
}

.pin{
  float-left:10px;
}


.pingpai{
  margin-left: 300px;
  float:left;
}

.areas{
   margin-left: 300px;
   margin-top: 130px;
  float:left;
}
.bofq{
   margin-left: -194px;
   margin-top: 50px;
   float:left;
}

/* .moddle{
  border: 2px red solid;
  height: 200px;
  width: 800px;
  margin-left: 200px;
} */

.aa{
   margin-left: 100px;
  float: left;
}



#liebiao{
  margin-top: 200px;
  margin-left: -950px;
  margin-bottom: 10px;
  font-size: 20px;
}
.y1{
  margin-top:10px;
  margin-left: 180px;
    float: left;
}
.y2{
  margin-left:500px;
  float: right;
}


.layout-logo{
    width: 200px;
   height: 10px;
    background: #5b6270;
  border-radius: 3px;
   float: right;
    position: relative;
    top: 15px;
    right:  150px;
}
.layout-nav{
   
    margin-right: 20px;
}
.ivu-layout {
  height: 100%;
}
</style>
